<template>
  <div class="management-container">
    <!-- 页面头部区域 -->
    <div class="management-header">
      <div class="header-content">
        <div class="ancient-title">地府机构管理</div>
        <div class="header-subtitle">阴曹地府 · 机构管理中心</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">🏢</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <CrownOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">仙官总数</div>
              <div class="stat-value">{{ systemInfo.totalOfficials?.toLocaleString() }}</div>
              <div class="stat-label">在册人员</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <TeamOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">在线人员</div>
              <div class="stat-value">{{ systemInfo.onlineOfficials }}</div>
              <div class="stat-label">当前值班</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <BankOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">十殿阎王</div>
              <div class="stat-value">{{ systemInfo.tenCourts }}</div>
              <div class="stat-label">部门运行</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon">
              <ScheduleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">值班计划</div>
              <div class="stat-value">{{ systemInfo.scheduleCompleted }}%</div>
              <div class="stat-label">完成度</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块导航 -->
    <div class="modules-section">
      <h3 class="section-title">
        <ApartmentOutlined class="section-icon" />
        机构管理模块
      </h3>

      <a-row :gutter="[32, 32]" class="modules-grid">
        <!-- 8.1 仙官职位管理 -->
        <a-col :xs="24" :lg="8">
          <div class="module-card" @click="navigateToModule('/management/official-position')">
            <div class="module-header">
              <div class="module-icon">
                <CrownOutlined />
              </div>
              <div class="module-title">仙官职位管理</div>
            </div>
            <div class="module-description">管理仙官职位等级、权限分配、调动记录和考核评估等相关事务</div>
            <div class="module-features">
              <div class="feature-item" @click="navigateToSubModule('/management/official-position/level-setting', $event)">
                <RiseOutlined class="feature-icon" />
                <span>职位等级设置</span>
              </div>
              <div class="feature-item" @click="navigateToSubModule('/management/official-position/permission-allocation', $event)">
                <SafetyOutlined class="feature-icon" />
                <span>权限分配管理</span>
              </div>
              <div class="feature-item" @click="navigateToSubModule('/management/official-position/transfer-record', $event)">
                <SwapOutlined class="feature-icon" />
                <span>职位调动记录</span>
              </div>
              <div class="feature-item" @click="navigateToSubModule('/management/official-position/assessment-system', $event)">
                <StarOutlined class="feature-icon" />
                <span>考核评估系统</span>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">职位等级：</span>
                <span class="stat-value">{{ moduleStats.officialPosition.levels }}级</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">本月调动：</span>
                <span class="stat-value">{{ moduleStats.officialPosition.transfers }}人</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 8.2 部门协作管理 -->
        <a-col :xs="24" :lg="8">
          <div class="module-card" @click="navigateToModule('/management/department-cooperation')">
            <div class="module-header">
              <div class="module-icon">
                <TeamOutlined />
              </div>
              <div class="module-title">部门协作管理</div>
            </div>
            <div class="module-description">协调十殿阎王分工、部门间协作、工作流程和任务分配等管理工作</div>
            <div class="module-features">
              <div class="feature-item" @click="navigateToSubModule('/management/department-cooperation/ten-courts-division', $event)">
                <BankOutlined class="feature-icon" />
                <span>十殿阎王分工</span>
              </div>
              <div class="feature-item" @click="navigateToSubModule('/management/department-cooperation/coordination', $event)">
                <ClusterOutlined class="feature-icon" />
                <span>部门间协调</span>
              </div>
              <div class="feature-item" @click="navigateToSubModule('/management/department-cooperation/workflow-setting', $event)">
                <NodeIndexOutlined class="feature-icon" />
                <span>工作流程设置</span>
              </div>
              <div class="feature-item" @click="navigateToSubModule('/management/department-cooperation/task-allocation', $event)">
                <InboxOutlined class="feature-icon" />
                <span>任务分配系统</span>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">运行部门：</span>
                <span class="stat-value">{{ moduleStats.departmentCooperation.departments }}个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">待分配任务：</span>
                <span class="stat-value">{{ moduleStats.departmentCooperation.pendingTasks }}项</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 8.3 值班排班系统 -->
        <a-col :xs="24" :lg="8">
          <div class="module-card" @click="navigateToModule('/management/duty-schedule')">
            <div class="module-header">
              <div class="module-icon">
                <ScheduleOutlined />
              </div>
              <div class="module-title">值班排班系统</div>
            </div>
            <div class="module-description">管理值班时间安排、人员分配、值班记录和紧急调班等排班事务</div>
            <div class="module-features">
              <div class="feature-item" @click="navigateToSubModule('/management/duty-schedule/time-arrangement', $event)">
                <ClockCircleOutlined class="feature-icon" />
                <span>值班时间安排</span>
              </div>
              <div class="feature-item" @click="navigateToSubModule('/management/duty-schedule/personnel-allocation', $event)">
                <UserOutlined class="feature-icon" />
                <span>值班人员分配</span>
              </div>
              <div class="feature-item" @click="navigateToSubModule('/management/duty-schedule/record-management', $event)">
                <FileTextOutlined class="feature-icon" />
                <span>值班记录管理</span>
              </div>
              <div class="feature-item" @click="navigateToSubModule('/management/duty-schedule/emergency-shift', $event)">
                <AlertOutlined class="feature-icon" />
                <span>紧急调班处理</span>
              </div>
            </div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">今日值班：</span>
                <span class="stat-value">{{ moduleStats.dutySchedule.todayDuty }}人</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">紧急调班：</span>
                <span class="stat-value">{{ moduleStats.dutySchedule.emergencyShifts }}次</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 最近活动日志 -->
    <div class="activity-section">
      <h3 class="section-title">
        <HistoryOutlined class="section-icon" />
        最近管理活动
      </h3>

      <div class="activity-list">
        <a-timeline>
          <a-timeline-item v-for="activity in recentActivities" :key="activity.id" :color="activity.color">
            <div class="activity-item">
              <div class="activity-header">
                <span class="activity-title">{{ activity.title }}</span>
                <span class="activity-time">{{ activity.time }}</span>
              </div>
              <div class="activity-description">{{ activity.description }}</div>
              <div class="activity-operator">操作人：{{ activity.operator }}</div>
            </div>
          </a-timeline-item>
        </a-timeline>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  HomeOutlined,
  ApartmentOutlined,
  CrownOutlined,
  TeamOutlined,
  BankOutlined,
  ScheduleOutlined,
  RiseOutlined,
  SafetyOutlined,
  SwapOutlined,
  StarOutlined,
  ClusterOutlined,
  NodeIndexOutlined,
  InboxOutlined,
  ClockCircleOutlined,
  UserOutlined,
  FileTextOutlined,
  AlertOutlined,
  HistoryOutlined
} from '@ant-design/icons-vue'

const router = useRouter()

// 系统统计信息
const systemInfo = reactive({
  totalOfficials: 8888,
  onlineOfficials: 234,
  tenCourts: 10,
  scheduleCompleted: 95
})

// 模块统计信息
const moduleStats = reactive({
  officialPosition: {
    levels: 9,
    transfers: 12
  },
  departmentCooperation: {
    departments: 10,
    pendingTasks: 28
  },
  dutySchedule: {
    todayDuty: 45,
    emergencyShifts: 3
  }
})

// 最近活动日志
const recentActivities = ref([
  {
    id: 1,
    title: '职位调动审批',
    description: '阎王殿判官王某升任黑白无常副将，调动审批已通过',
    operator: '玉皇大帝',
    time: '2小时前',
    color: 'green'
  },
  {
    id: 2,
    title: '紧急值班调换',
    description: '因突发事件，第三殿阎王府值班人员紧急调换',
    operator: '宋帝王',
    time: '4小时前',
    color: 'orange'
  },
  {
    id: 3,
    title: '新仙官入职',
    description: '3名新仙官完成入职手续，已分配至相应部门',
    operator: '人事司',
    time: '6小时前',
    color: 'blue'
  },
  {
    id: 4,
    title: '部门协作会议',
    description: '十殿阎王联席会议顺利召开，讨论业务协作优化方案',
    operator: '阎罗王',
    time: '1天前',
    color: 'purple'
  },
  {
    id: 5,
    title: '权限配置更新',
    description: '更新了黄泉路管理相关权限配置，涉及5个职位',
    operator: '系统管理员',
    time: '2天前',
    color: 'cyan'
  }
])

// 导航到指定模块
const navigateToModule = (path) => {
  router.push(path)
}

// 导航到子模块
const navigateToSubModule = (path, event) => {
  // 阻止事件冒泡，避免触发模块卡片的点击事件
  event.stopPropagation()
  router.push(path)
}
</script>

<style lang="scss" scoped>
.management-container {
  padding: 24px;

  // 页面头部
  .management-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.judgment-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.pending-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.online-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 模块导航区域
  .modules-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .module-card {
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      height: 100%;

      &:active {
        transform: translateY(-2px);
      }

      .module-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .module-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, $secondary-color, #f0c674);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: white;
        }

        .module-title {
          font-size: 18px;
          font-weight: bold;
          color: $primary-color;
        }
      }

      .module-description {
        color: $text-secondary;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .module-features {
        margin-bottom: 20px;

        .feature-item {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;
          padding: 6px 12px;
          background: rgba(212, 153, 10, 0.1);
          border-radius: 6px;
          transition: all 0.3s ease;
          cursor: pointer;

          &:hover {
            background: rgba(212, 153, 10, 0.2);
            transform: translateX(2px);
          }

          &:active {
            transform: translateX(1px);
          }

          .feature-icon {
            color: $secondary-color;
            font-size: 14px;
          }

          span {
            font-size: 14px;
            color: $text-primary;
          }
        }
      }

      .module-stats {
        padding-top: 16px;
        border-top: 1px solid rgba(212, 153, 10, 0.2);

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .stat-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .stat-value {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }

  // 活动日志区域
  .activity-section {
    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .activity-list {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);

      .activity-item {
        .activity-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .activity-title {
            font-weight: bold;
            color: $primary-color;
            font-size: 16px;
          }

          .activity-time {
            color: $text-secondary;
            font-size: 14px;
          }
        }

        .activity-description {
          color: $text-primary;
          line-height: 1.5;
          margin-bottom: 8px;
        }

        .activity-operator {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
